<template>
	<view>
		<div class="show">
		        <div class="show_content">
		            <div class="close" onclick="close_box()">关闭</div>
		            <div class="show_content_top">温馨提示</div>
		            <div class="show_content_content">预升级无需支付任何金额，即可直接享受城市服务商的所有待遇，但是获取的收入将优先用来支付升级的费用</div>
		            <div class="displayFlex upgrade">
		                <div class="flex upgrade_bd" onclick="pre_upgrade()">预升级</div>
		                <div class="flex" onclick="pay_ment(3,'on')">立即升级</div>
		            </div>
		        </div>
		    </div>
		    <div>
		        <div class="foot">
		            <div class="foot_user">
		                <div class="displayFlex" style="align-items: center;">
		
		                    <img class="user_img" src="{$my.avatar}">
		
		                    <div class="user_namber flex_xy">
		                        <div>
		                            <div style="text-align: left;">
		                                <div class="flex">{$my.user_name}</div>
		                            </div>
		                        </div>
		                    </div>
		                    <div class="flex" style="text-align: right;margin-right: 10px">{$my.grade_name}</div>
		                </div>
		            </div>
		        </div>
		        <div class="group_vip">
		            <div v-if="my.grade_id == 3">
		                您已是城市服务商,无需升级了。
						</div>
		                <div>
		                    <form method="post" action="{:url('portal/my/pay_upgrade')}">
		                        <volist name="grade" id="g" key="k">
		                            <div class="vip">
		                                <div class="displayFlex" onclick="choose(this)">
		                                    <div class="flex" style="text-align: left">
		                                        <div style="padding-left: 10px;">
		                                            <input name="grade_choose" type="radio" value="{$g.grade_id}" <if condition="$k eq 1">checked="checked"</if> /><i class="iconfont icon-square"></i>￥<span class="grade_money">{$g.grade_money}</span>
		                                        </div>
		                                    </div>
		                                    <div class="flex" style="text-align: right;padding-right: 10px;">{$g.grade_name}</div>
		                                </div>
		                            </div>
		                        </volist>
		
		                        <div class="checkbox"><input type="checkbox" name="agree"><i class="iconfont icon-squarecheck"></i><a href="#">同意《申请服务商条例》</a></div>
		
		                    </form>
		
		                    <div  class="balance_btn">
		                        <button type="submit" class="button button-fill button-big" onclick="pay()">立即升级</button>
		                    </div>
		                </div>
		            
		        </div>
		    </div>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			
		}
	}
</script>

<style>
 html,
    body {
        height: 100%;
        background: #f1f1f1;
        font-size: 14px;
    }

    .displayFlex {
        display: flex;
    }

    .flex {
        flex: 1;
        text-align: center;
    }

    .flex_xy {
        display: flex;
        align-items: center; /*垂直居中*/
        justify-content: center; /*水平居中*/
    }

    .foot {
        margin-bottom: 10px;
        background: #fff;
        padding: 10px;
    }

    .user_img {
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        border-radius: 50%;
        height: 40px;
        width: 40px;
        line-height: 40px;
        margin: 10px 20px;
        background: #ccc;
    }

    .user div {
        width: 100%;
        height: 100%;
        background: #eee;
    }

    .shopping_order {
        background: #fff;
        margin-bottom: 10px;
        background: #fff;
        padding: 10px;
        padding-top: 0;
    }

    .order_all {
        border-bottom: 1px solid #ccc;
        height: 40px;
        line-height: 40px;
    }

    .order_list {
        padding: .4rem 0 .25rem;
    }

    .mall {
        background: #fff;
        margin-bottom: 10px;
        background: #fff;
        padding: 10px;
        padding-top: 0;
    }

    .mall_vip {
        border-bottom: 1px solid #ccc;
        height: 40px;
        line-height: 40px;
    }

    .vip_privilege {
        padding: .4rem 0 .25rem;
    }
    .group_vip{
        height: 100%;
        background: #fff;
        padding: 10px;
        text-align: center;
    }
    .vip{
        border:1px solid #ccc;
        -webkit-border-radius: 6px;
        -moz-border-radius: 6px;
        border-radius: 6px;
        height: 40px;
        line-height: 40px;
        margin: 10px 0;
    }
    .vip:hover{
        background: #7AC1FF;
        color: #fff;
    }
    .balance_btn button{
        height: 40px;
        line-height: 40px;
        margin: 10px;
        width: 100%;
    }
    .balance_btn{
        width: calc(100% - 20px);
    }

    .vip input,.checkbox input{
        display: none;
    }
    .vip i{
        font-size: 15px;
    }
    .checkbox i{
        font-size: 15px;
    }
    a:link{text-decoration:none;}
    a:visited {text-decoration:none;}
    a:hover {text-decoration:none;}
    a:active {text-decoration:none;}
    .show{
        position: fixed;
        top: 0;
        left: 0;
        background-color: rgba(000,000,000,0.5);
        width:100%;
        height: 100%;
        z-index: 99;
        /*display: flex;*/
        display: none;
    }
    .show_content{
        width: 80%;
        background: #fff;
        text-align: center;
        border-radius: 0.06rem;
        overflow: hidden;
        margin: auto;
        border-radius: .2rem;
        position: relative;
    }
    .show_content_top{
        height: 2.6rem;
        line-height: 2.6rem;
        border-bottom: 1px solid #eee;
    }
    .show_content_content{
        padding:10px;
        border-bottom: 1px solid #eee;
        text-align: left;
    }
    .upgrade{
         height: 2.6rem;
        line-height: 2.6rem;
    }
    .upgrade_bd{
        border-right: 1px solid #eee;
    }
    .close{
        position: absolute;
        right: 0.6rem;
        height: 2.6rem;
        line-height: 2.6rem;
        width: 2rem;
    }
</style>
